<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>活动策划 UI 原型</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 15px;
      background-color: #f6f6f6;
      color: #333;
    }

    .header {
      text-align: center;
      padding: 15px 0;
      background-color: #fff;
      border-radius: 8px;
      margin-bottom: 15px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .header h1 {
      font-size: 1.5em;
      margin: 0;
      color: #ff9500;
    }

    /* Orange theme */
    .card {
      background-color: #fff;
      border-radius: 8px;
      padding: 15px;
      margin-bottom: 15px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    }

    .card h2 {
      font-size: 1.1em;
      margin-top: 0;
      margin-bottom: 10px;
      border-left: 4px solid #ff9500;
      padding-left: 8px;
    }

    .ai-feature {
      border: 1px dashed #ff9500;
      padding: 10px;
      margin-top: 10px;
      border-radius: 5px;
      background-color: #fff7e6;
    }

    .ai-feature p {
      margin: 5px 0;
      font-size: 0.9em;
    }

    .ai-feature strong {
      color: #d46b08;
    }

    button {
      background-color: #ff9500;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 5px;
      cursor: pointer;
      font-size: 1em;
      width: 100%;
      margin-top: 10px;
    }

    button:hover {
      background-color: #c77400;
    }

    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 0.9em;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
      width: calc(100% - 22px);
      /* Adjust for padding and border */
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-size: 0.95em;
    }

    textarea {
      resize: vertical;
    }

    .activity-list .activity-item {
      border-bottom: 1px solid #eee;
      padding: 10px 0;
    }

    .activity-list .activity-item:last-child {
      border-bottom: none;
    }

    .activity-item h3 {
      margin: 0 0 5px;
      font-size: 1em;
    }

    .activity-item p {
      margin: 2px 0;
      font-size: 0.85em;
      color: #777;
    }

    .activity-item span {
      background-color: #e6f7ff;
      color: #1890ff;
      padding: 2px 6px;
      border-radius: 3px;
      font-size: 0.8em;
      margin-right: 5px;
    }
  </style>
</head>

<body>

  <div class="header">
    <h1>活动策划助手</h1>
  </div>

  <div class="card">
    <h2>发起新活动</h2>
    <div class="form-group">
      <label for="activity-name">活动名称</label>
      <input type="text" id="activity-name" placeholder="例如：迎新晚会">
    </div>
    <div class="form-group">
      <label for="activity-type">活动类型</label>
      <select id="activity-type">
        <option>文娱</option>
        <option>体育</option>
        <option>学术</option>
        <option>公益</option>
        <option>其他</option>
      </select>
    </div>
    <div class="form-group">
      <label for="participants">预计人数</label>
      <input type="number" id="participants" placeholder="例如：50">
    </div>
    <div class="form-group">
      <label for="budget">预算范围 (元)</label>
      <input type="number" id="budget" placeholder="例如：1000">
    </div>
    <div class="form-group">
      <label for="description">简单描述</label>
      <textarea id="description" rows="3" placeholder="简单描述活动目标和内容"></textarea>
    </div>
    <button>获取 AI 策划建议</button>
  </div>

  <div class="card">
    <h2>AI 活动创意 & 资源推荐</h2>
    <div class="ai-feature">
      <p><strong>AI 建议:</strong> 基于你的输入（迎新晚会, 文娱, 50人, 1000元预算），推荐以下创意和资源：</p>
      <ul>
        <li><strong>创意1:</strong> "星光璀璨"主题歌舞晚会。<strong>可行性:</strong> <span
            style="color: green;">高</span>。<strong>预算评估:</strong> <span style="color: orange;">需精简舞台布置</span>。</li>
        <li><strong>创意2:</strong> 互动游戏破冰晚会。<strong>可行性:</strong> <span
            style="color: green;">高</span>。<strong>预算评估:</strong> <span style="color: green;">充足</span>。</li>
        <li><strong>推荐场地:</strong> 学校小礼堂 (免费，需预约), 活动中心多功能厅 (收费)。</li>
        <li><strong>推荐资源:</strong> 联系学生会文艺部获取节目支持，联系设备处租赁音响设备。</li>
      </ul>
    </div>
    <button style="background-color: #f0f0f0; color: #555; margin-top: 5px;">查看详细方案</button>
  </div>

  <div class="card">
    <h2>AI 智能日程安排</h2>
    <p>邀请核心成员，AI 帮你找到大家都有空的时间段。</p>
    <!-- Placeholder for member selection and time input -->
    <div class="ai-feature">
      <p><strong>AI 分析:</strong> 已分析 5 位核心成员课表，建议在 <strong>周五晚上 7:00 - 9:00</strong> 或 <strong>周六下午 2:00 - 4:00</strong>
        召开筹备会议。</p>
    </div>
    <button>发起会议邀请</button>
  </div>

  <div class="card activity-list">
    <h2>我策划的活动</h2>
    <div class="activity-item">
      <h3>校园歌手大赛初赛</h3>
      <p>时间: 2023-11-20 | 地点: 大礼堂</p>
      <p><span>审核通过</span><span>进行中</span></p>
    </div>
    <div class="activity-item">
      <h3>"变废为宝"创意设计展</h3>
      <p>时间: 2023-10-15 | 地点: 一教大厅</p>
      <p><span>已结束</span></p>
    </div>
    <!-- More items -->
    <button>查看所有活动</button>
  </div>

  <!-- Potential AI effect prediction -->
  <!-- <div class="card">
        <h2>AI 活动效果预测</h2>
        <p>根据活动类型和宣传力度，预测活动参与热度。</p>
    </div> -->

</body>

</html>